import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Statistic, Table, Progress, message } from 'antd';
import { 
  UserOutlined, 
  BankOutlined, 
  FileTextOutlined, 
  ContainerOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined
} from '@ant-design/icons';
import axios from 'axios';

const Dashboard = () => {
  const [loading, setLoading] = useState(true);
  const [statistics, setStatistics] = useState({
    totalUsers: 0,
    totalJobs: 0,
    totalContracts: 0,
    pendingAudits: 0,
    userGrowth: 0,
    jobGrowth: 0,
    contractGrowth: 0,
    auditGrowth: 0
  });
  const [recentActivities, setRecentActivities] = useState([]);

  useEffect(() => {
    fetchDashboardData();
  }, []);

  const fetchDashboardData = async () => {
    try {
      setLoading(true);
      const token = localStorage.getItem('admin_token');
      
      // 获取平台统计数据
      const statsResponse = await axios.get('/api/admin/statistics', {
        headers: { Authorization: `Bearer ${token}` }
      });

      if (statsResponse.data.success) {
        setStatistics(statsResponse.data.data);
      }

      // 模拟最近活动数据
      setRecentActivities([
        {
          key: '1',
          time: '2024-01-10 14:30',
          user: '张三',
          action: '提交了身份认证资料',
          status: '待审核'
        },
        {
          key: '2',
          time: '2024-01-10 14:25',
          user: '李四',
          action: '发布了新岗位：前端开发工程师',
          status: '已发布'
        },
        {
          key: '3',
          time: '2024-01-10 14:20',
          user: '王五',
          action: '申请了岗位：UI设计师',
          status: '待处理'
        },
        {
          key: '4',
          time: '2024-01-10 14:15',
          user: '赵六',
          action: '签署了劳动合同',
          status: '已完成'
        }
      ]);

    } catch (error) {
      console.error('获取数据失败:', error);
      message.error('获取数据失败');
    } finally {
      setLoading(false);
    }
  };

  const activityColumns = [
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
      width: 150,
    },
    {
      title: '用户',
      dataIndex: 'user',
      key: 'user',
      width: 100,
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status) => {
        const colors = {
          '待审核': '#faad14',
          '已发布': '#52c41a',
          '待处理': '#1890ff',
          '已完成': '#52c41a'
        };
        return <span style={{ color: colors[status] || '#666' }}>{status}</span>;
      }
    },
  ];

  return (
    <div>
      <h1 style={{ marginBottom: 24 }}>数据看板</h1>
      
      {/* 统计卡片 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={statistics.totalUsers}
              prefix={<UserOutlined />}
              suffix={
                <span style={{ fontSize: 12, color: statistics.userGrowth >= 0 ? '#3f8600' : '#cf1322' }}>
                  {statistics.userGrowth >= 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                  {Math.abs(statistics.userGrowth)}%
                </span>
              }
              loading={loading}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="总岗位数"
              value={statistics.totalJobs}
              prefix={<BankOutlined />}
              suffix={
                <span style={{ fontSize: 12, color: statistics.jobGrowth >= 0 ? '#3f8600' : '#cf1322' }}>
                  {statistics.jobGrowth >= 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                  {Math.abs(statistics.jobGrowth)}%
                </span>
              }
              loading={loading}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="总合同数"
              value={statistics.totalContracts}
              prefix={<ContainerOutlined />}
              suffix={
                <span style={{ fontSize: 12, color: statistics.contractGrowth >= 0 ? '#3f8600' : '#cf1322' }}>
                  {statistics.contractGrowth >= 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                  {Math.abs(statistics.contractGrowth)}%
                </span>
              }
              loading={loading}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="待审核"
              value={statistics.pendingAudits}
              prefix={<FileTextOutlined />}
              suffix={
                <span style={{ fontSize: 12, color: statistics.auditGrowth >= 0 ? '#3f8600' : '#cf1322' }}>
                  {statistics.auditGrowth >= 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                  {Math.abs(statistics.auditGrowth)}%
                </span>
              }
              loading={loading}
            />
          </Card>
        </Col>
      </Row>

      {/* 图表区域 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={12}>
          <Card title="用户角色分布" loading={loading}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ marginBottom: 16 }}>
                <span>用工方</span>
                <Progress percent={30} strokeColor="#1890ff" />
              </div>
              <div style={{ marginBottom: 16 }}>
                <span>劳动者</span>
                <Progress percent={65} strokeColor="#52c41a" />
              </div>
              <div>
                <span>管理员</span>
                <Progress percent={5} strokeColor="#faad14" />
              </div>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="岗位状态分布" loading={loading}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ marginBottom: 16 }}>
                <span>已发布</span>
                <Progress percent={45} strokeColor="#52c41a" />
              </div>
              <div style={{ marginBottom: 16 }}>
                <span>招聘中</span>
                <Progress percent={35} strokeColor="#1890ff" />
              </div>
              <div>
                <span>已完成</span>
                <Progress percent={20} strokeColor="#faad14" />
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 最近活动 */}
      <Card title="最近活动" loading={loading}>
        <Table
          columns={activityColumns}
          dataSource={recentActivities}
          pagination={false}
          size="small"
        />
      </Card>
    </div>
  );
};

export default Dashboard;
